<template>
  <div class="app-container">
    <!--			查询表头-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="物流ID">
        <el-input placeholder="请输入物流ID" v-model="ContractParameter.pdId"></el-input>
      </el-form-item>

      <el-form-item label="商品数量">
        <el-input placeholder="请输入商品数量" v-model="ContractParameter.goodsNum"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="success" @click="queryData">查询</el-button>
        <el-button type="success" @click="reset">重置</el-button>
        <el-button type="success" @click="addUser">新增</el-button>
      </el-form-item>
    </el-form>
    <!--	table 标签-->

    <el-table border :data="list" style="width:100%" :default-sort="{prop: 'startTime'}">
      <!--		表示一列 循环输出标签的内容-->
      <el-table-column label="物流ID" prop="pdId"></el-table-column>
      <el-table-column label="商品ID" prop="goodsId"></el-table-column>
      <el-table-column label="用户ID" prop="userId"></el-table-column>
      <el-table-column label="商品数量" prop="goodsNum"></el-table-column>
      <el-table-column label="收货地址" prop="address"></el-table-column>
      <el-table-column label="快递" prop="parcel" width="110px"></el-table-column>
      <el-table-column label="订单状态" prop="status" sortable width="110px"></el-table-column>
      <el-table-column label="创建时间" prop="createTime" width="110px"></el-table-column>
      <el-table-column label="修改时间" prop="updateTime" width="150px"></el-table-column>
      <!--		操作按钮-->
      <el-table-column label="操作" width="150px">
        <template slot-scope="x">
          <el-button type="warning" size="mini" @click="update(x.row)">修改</el-button>
          <el-button type="danger" size="mini" @click="del(x.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 修改- 对话框组件 -->
    <el-dialog :visible.sync="updateShow" width="50%" title="用户信息修改">
      <el-form label-width="80px">
        <el-form-item label="商品ID">
          <el-input v-model="updateForm.goodsId"></el-input>
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input v-model="updateForm.userId"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="updateForm.goodsNum"></el-input>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-input v-model="updateForm.address"></el-input>
        </el-form-item>
        <el-form-item label="快递">
          <el-input v-model="updateForm.parcel"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-input v-model="updateForm.status"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="success" size="mini" @click="updateUser">修改</el-button>
          <el-button type="success" size="mini" @click="updateShow=false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 新增- 对话框组件 -->
    <el-dialog :visible.sync="addShow" width="50%" title="新增用户信息">
      <el-form label-width="80px">

        <el-form-item label="商品ID">
          <el-input v-model="addForm.goodsId"></el-input>
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input v-model="addForm.userId"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="addForm.goodsNum"></el-input>
        </el-form-item>
        <el-form-item label="收货地址">
          <el-input v-model="addForm.address"></el-input>
        </el-form-item>
        <el-form-item label="快递">
          <el-input v-model="addForm.parcel"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-input v-model="addForm.status"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="success" size="mini" @click="saveUser">新增</el-button>
          <el-button type="success" size="mini" @click="addShow=false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {query, update, add, del, goodsList} from '@/api/order'
import {selectSalary} from "@/api/goods";

export default {
  data() {
    return {
      ContractParameter: {//查询数据；创建对象，参数和后端命名相同

      },
      addForm: {

      },
      updateForm: {//修改时，多一个UserId
        userId: "", userName: "", section: "", job: "", entryTime: "", startTime: "", endTime: "",
        content: "", notes: "", conId: ""//修改时使用的条件
      },
      // 定义数组，接受返回值
      list: [],
      addShow: false,//新增弹窗 新增用户，控制弹窗的显示否
      updateShow: false//修改弹窗
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      goodsList(this.ContractParameter).then(res => {
        this.list = res.data;
      })
    },
    // 删除
    del(x) {
      const is = confirm("你确定删除数据吗？");
      if (is) {//确定删除,则删除
        let data = {pdId: x.pdId}
        del(data).then(res => {
          this.$alert(res.msg)
          if (res.code == 200) {
            this.queryData();
          }
        })
      } else {
        this.$alert("取消删除");
      }
    },

    //保存数据
    saveUser() {
      add(this.addForm).then(res => {
        this.$alert(res.msg)
        if (res.code == 200) {
          this.addShow = false;
          this.queryData();
        }
      })
    },

    addUser() {//新增用户，利用dailog弹窗
      this.addShow = true;
    },
    // 修改函数
    updateUser() {// 保存修改数据
      update(this.updateForm).then(res => {
        this.$alert(res.msg);
        if (res.code == 200) {
          this.queryData();
          this.updateShow = false;
        }
      })
    },

    //修改变量
    update(x) {
      // 弹窗，打开弹窗
      this.updateShow = true;
      // 数据回显
      this.updateForm = x;//赋值地址，对象赋值
    },

    reset() {
      // 重置函数
      this.ContractParameter.userName = "";
      this.ContractParameter.userId = "";
      this.queryData();
    },

    // 查询用户
    queryData() {
      this.getList()
    }
  },
  // 生命周期函数。用于决定页面开始时，执行查询函数，也叫钩子函数，钩子，浏览器加载完html元素和Js、css后执行的函数
  mounted() {
    //运行查询函数
    this.queryData()//官方定义 var vv = new Vue(),但省略，this 可代替 vv
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

